<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Metro Icon Font :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


    <style>
        .icon-list li {
            width: 23%;
            padding: .625rem;
            cursor: pointer;
            vertical-align: baseline;
            font-size: .9em;
        }
        .icon-list li:hover {
            background-color: #64b4db;
            color: #fff;
        }
        .icon-list li [class*=mif-] {
            font-size: 1.25rem;
            margin-right: 10px;
            color: #999;
        }
        .icon-list li:hover [class*=mif-] {
            color: #fff;
        }
    </style>

</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Metro Icon Font</h1>

        @@adsense

        <div class="margin20 no-margin-left no-margin-right sub-header text-light">
            Metro Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Metro Icon Font includes over 400 icons.
        </div>

        <h4>How to use</h4>
        <div class="example" data-text="code">

            <h5>Include in page head:</h5>
            <pre class="prettyprint linenums"><code>
                &lt;link href="metro-icons.css" rel="stylesheet"&gt;
            </code></pre>

            <h5>In html use:</h5>
            <pre class="prettyprint linenums"><code>
                &lt;span class="mif-icon_name"&gt;&lt;/span&gt;
            </code></pre>
        </div>

        <p>
            To change size icon you can use next classes: <span class="tag">mif-lg</span>, <span class="tag">mif-2x</span>, <span class="tag">mif-3x</span>, <span class="tag">mif-4x</span>.
        </p>

        <div class="example" data-text="size">
            Icons can be resized to any
            <span class="mif-earth"></span>
            <span class="mif-earth mif-lg"></span>
            <span class="mif-earth mif-2x"></span>
            <span class="mif-earth mif-3x"></span>
            <span class="mif-earth mif-4x"></span>
            sizes over built-in classes
        </div>
        <div class="example" data-text="code">
            <pre class="prettyprint linenums"><code>
                &lt;span class="mif-earth mif-2x"&gt;&lt;/span&gt;
            </code></pre>
        </div>

        <p>
            To change icon color you can use <span class="tag">fg-*</span> classes or use css property <span class="tag">color</span>.
        </p>

        <div class="example" data-text="size">
            <span class="mif-earth fg-cyan"></span>
            <span class="mif-earth mif-lg fg-pink"></span>
            <span class="mif-earth mif-2x fg-green"></span>
            <span class="mif-earth mif-3x fg-red"></span>
            <span class="mif-earth mif-4x" style="color: blue"></span>
        </div>
        <div class="example" data-text="code">
            <pre class="prettyprint linenums"><code>
                &lt;span class="mif-earth fg-green"&gt;&lt;/span&gt;
                &lt;span class="mif-earth" style="color: red;"&gt;&lt;/span&gt;
            </code></pre>
        </div>

        <h2 class="text-light pos-rel">Icons <span class="small dropdown-toggle">goto</span>
            <ul class="d-menu context" data-role="dropdown">
                <li><a href="#_application_">Application icons</a></li>
                <li><a href="#_mobile_">Mobile icons</a></li>
                <li><a href="#_device_">Device icons</a></li>
                <li><a href="#_player_">Player icons</a></li>
                <li><a href="#_brand_">Brand icons</a></li>
                <li><a href="#_weather_">Weather icons</a></li>
                <li><a href="#_chart_">Chart icons</a></li>
                <li><a href="#_spinner_">Spinner icons</a></li>
            </ul>
        </h2>

        <p>
            Below is an exhaustive list of icons that are included in Metro Icon Font.
        </p>

        <h4 id="_new_">New icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-eur"></span> eur</li>
                <li><span class="mif-gbp"></span> gbp</li>
                <li><span class="mif-dollar2"></span> dollar2</li>
                <li><span class="mif-inr"></span> inr</li>
                <li><span class="mif-cny"></span> cny</li>
                <li><span class="mif-rouble"></span> rouble</li>
                <li><span class="mif-krw"></span> krw</li>
                <li><span class="mif-try"></span> try</li>
                <li><span class="mif-bitcoin"></span> bitcoin</li>

                <li><span class="mif-youtube-play"></span> youtube-play</li>
                <li><span class="mif-linux"></span> linux</li>
                <li><span class="mif-jsfiddle"></span> jsfiddle</li>
                <li><span class="mif-openid"></span> openid</li>
                <li><span class="mif-digg"></span> digg</li>
                <li><span class="mif-google-wallet"></span> google-wallet</li>
                <li><span class="mif-opencart"></span> opencart</li>
                <li><span class="mif-amazon"></span> amazon</li>
                <li><span class="mif-wikipedia"></span> wikipedia</li>

                <li><span class="mif-space-shuttle"></span> space-shuttle</li>
                <li><span class="mif-automobile"></span> automobile</li>
                <li><span class="mif-cab"></span> cab</li>
                <li><span class="mif-bicycle"></span> bicycle</li>
                <li><span class="mif-bus"></span> bus</li>
                <li><span class="mif-ship"></span> ship</li>
                <li><span class="mif-motorcycle"></span> motorcycle</li>
                <li><span class="mif-train"></span> train</li>
                <li><span class="mif-subway"></span> subway</li>

                <li><span class="mif-copyright"></span> copyright</li>
                <li><span class="mif-trademark"></span> trademark</li>
                <li><span class="mif-registered"></span> registered</li>
                <li><span class="mif-creative-commons"></span> creative-commons</li>

                <li><span class="mif-fonticons"></span> fonticons</li>
                <li><span class="mif-earth2"></span> earth2</li>
                <li><span class="mif-shit"></span> shit</li>
                <li><span class="mif-broadcast"></span> broadcast</li>
                <li><span class="mif-organization"></span> organization</li>
                <li><span class="mif-squirrel"></span> squirrel</li>
                <li><span class="mif-steps"></span> steps</li>
                <li><span class="mif-versions"></span> versions</li>
                <li><span class="mif-language"></span> language</li>
                <li><span class="mif-unlink"></span> unlink</li>
                <li><span class="mif-fire-extinguisher"></span> fire-extinguisher</li>
            </ul>
        </div>


        <h4 id="_application_">Application icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-space-shuttle"></span> space-shuttle</li>
                <li><span class="mif-automobile"></span> automobile</li>
                <li><span class="mif-cab"></span> cab</li>
                <li><span class="mif-bicycle"></span> bicycle</li>
                <li><span class="mif-bus"></span> bus</li>
                <li><span class="mif-ship"></span> ship</li>
                <li><span class="mif-motorcycle"></span> motorcycle</li>
                <li><span class="mif-train"></span> train</li>
                <li><span class="mif-subway"></span> subway</li>
                <li><span class="mif-copyright"></span> copyright</li>
                <li><span class="mif-trademark"></span> trademark</li>
                <li><span class="mif-registered"></span> registered</li>
                <li><span class="mif-creative-commons"></span> creative-commons</li>
                <li><span class="mif-fonticons"></span> fonticons</li>
                <li><span class="mif-earth2"></span> earth2</li>
                <li><span class="mif-shit"></span> shit</li>
                <li><span class="mif-broadcast"></span> broadcast</li>
                <li><span class="mif-organization"></span> organization</li>
                <li><span class="mif-squirrel"></span> squirrel</li>
                <li><span class="mif-steps"></span> steps</li>
                <li><span class="mif-versions"></span> versions</li>
                <li><span class="mif-language"></span> language</li>
                <li><span class="mif-unlink"></span> unlink</li>
                <li><span class="mif-fire-extinguisher"></span> fire-extinguisher</li>
                <li><span class="mif-eur"></span> eur</li>
                <li><span class="mif-gbp"></span> gbp</li>
                <li><span class="mif-dollar2"></span> dollar2</li>
                <li><span class="mif-inr"></span> inr</li>
                <li><span class="mif-cny"></span> cny</li>
                <li><span class="mif-rouble"></span> rouble</li>
                <li><span class="mif-krw"></span> krw</li>
                <li><span class="mif-try"></span> try</li>
                <li><span class="mif-bitcoin"></span> bitcoin</li>
                <li><span class="mif-microscope"></span> microscope</li>
                <li><span class="mif-stack2"></span> stack2</li>
                <li><span class="mif-stack3"></span> stack3</li>
                <li><span class="mif-lamp"></span> lamp</li>
                <li><span class="mif-injection"></span> injection</li>
                <li><span class="mif-thermometer2"></span> thermometer2</li>
                <li><span class="mif-justice"></span> justice</li>
                <li><span class="mif-user-md"></span> user-md</li>
                <li><span class="mif-stethoscope"></span> stethoscope</li>
                <li><span class="mif-ambulance"></span> ambulance</li>
                <li><span class="mif-medkit"></span> medkit</li>
                <li><span class="mif-paw"></span> paw</li>
                <li><span class="mif-file-pdf"></span> file-pdf</li>
                <li><span class="mif-file-word"></span> file-word</li>
                <li><span class="mif-file-excel"></span> file-excel</li>
                <li><span class="mif-file-powerpoint"></span> file-powerpoint</li>
                <li><span class="mif-file-image"></span> file-image</li>
                <li><span class="mif-file-archive"></span> file-archive</li>
                <li><span class="mif-file-audio"></span> file-audio</li>
                <li><span class="mif-file-movie"></span> file-movie</li>
                <li><span class="mif-file-code"></span> file-code</li>
                <li><span class="mif-visa"></span> visa</li>
                <li><span class="mif-mastercard"></span> mastercard</li>
                <li><span class="mif-discover"></span> discover</li>
                <li><span class="mif-amex"></span> amex</li>
                <li><span class="mif-cc-paypal"></span> cc-paypal</li>
                <li><span class="mif-heartbeat"></span> heartbeat</li>
                <li><span class="mif-venus"></span> venus</li>
                <li><span class="mif-mars"></span> mars</li>
                <li><span class="mif-medium"></span> medium</li>
                <li><span class="mif-directions-bike"></span> directions-bike</li>
                <li><span class="mif-location-city"></span> location-city</li>
                <li><span class="mif-library"></span> library</li>
                <li><span class="mif-calculator2"></span> calculator2</li>
                <li><span class="mif-barbell"></span> barbell</li>
                <li><span class="mif-3d-rotation"></span> 3d-rotation</li>
                <li><span class="mif-alarm"></span> alarm</li>
                <li><span class="mif-alarm-on"></span> alarm-on</li>
                <li><span class="mif-favorite"></span> favorite</li>
                <li><span class="mif-settings-ethernet"></span> settings-ethernet</li>
                <li><span class="mif-settings-power"></span> settings-power</li>
                <li><span class="mif-settings-voice"></span> settings-voice</li>
                <li><span class="mif-shopping-basket"></span> shopping-basket</li>
                <li><span class="mif-contacts-dialer"></span> contacts-dialer</li>
                <li><span class="mif-contacts-mail"></span> contacts-mail</li>
                <li><span class="mif-drafts"></span> drafts</li>
                <li><span class="mif-mail"></span> mail</li>
                <li><span class="mif-brightness-auto"></span> brightness-auto</li>
                <li><span class="mif-multitrack-audio"></span> multitrack-audio</li>
                <li><span class="mif-widgets"></span> widgets</li>
                <li><span class="mif-usb"></span> usb</li>
                <li><span class="mif-money"></span> money</li>
                <li><span class="mif-vertical-align-bottom"></span> vertical-align-bottom</li>
                <li><span class="mif-vertical-align-center"></span> vertical-align-center</li>
                <li><span class="mif-vertical-align-top"></span> vertical-align-top</li>
                <li><span class="mif-file-download"></span> file-download</li>
                <li><span class="mif-file-upload"></span> file-upload</li>
                <li><span class="mif-keyboard-return"></span> keyboard-return</li>
                <li><span class="mif-security"></span> security</li>
                <li><span class="mif-looks"></span> looks</li>
                <li><span class="mif-palette"></span> palette</li>
                <li><span class="mif-layers"></span> layers</li>
                <li><span class="mif-layers-clear"></span> layers-clear</li>
                <li><span class="mif-local-airport"></span> local-airport</li>
                <li><span class="mif-florist"></span> florist</li>
                <li><span class="mif-gas-station"></span> gas-station</li>
                <li><span class="mif-hotel"></span> hotel</li>
                <li><span class="mif-local-service"></span> local-service</li>
                <li><span class="mif-map2"></span> map2</li>
                <li><span class="mif-traff"></span> traff</li>
                <li><span class="mif-apps"></span> apps</li>
                <li><span class="mif-chevron-left"></span> chevron-left</li>
                <li><span class="mif-chevron-right"></span> chevron-right</li>
                <li><span class="mif-expand-less"></span> expand-less</li>
                <li><span class="mif-expand-more"></span> expand-more</li>
                <li><span class="mif-menu"></span> menu</li>
                <li><span class="mif-more-horiz"></span> more-horiz</li>
                <li><span class="mif-more-vert"></span> more-vert</li>
                <li><span class="mif-unfold-less"></span> unfold-less</li>
                <li><span class="mif-unfold-more"></span> unfold-more</li>
                <li><span class="mif-not"></span> not</li>
                <li><span class="mif-drive-eta"></span> drive-eta</li>
                <li><span class="mif-event-available"></span> event-available</li>
                <li><span class="mif-event-busy"></span> event-busy</li>
                <li><span class="mif-folder-special"></span> folder-special</li>
                <li><span class="mif-sd-card"></span> folder-sd-card</li>
                <li><span class="mif-sync-disabled"></span> sync-disabled</li>
                <li><span class="mif-sync-problem"></span> sync-problem</li>
                <li><span class="mif-vpn-lock"></span> vpn-lock</li>
                <li><span class="mif-vpn-publ"></span> vpn-publ</li>
                <li><span class="mif-school"></span> school</li>
                <li><span class="mif-file-binary"></span> file-binary</li>
                <li><span class="mif-mail-read"></span> mail-read</li>
                <li><span class="mif-quote"></span> quote</li>
                <li><span class="mif-home"></span> home</li>
                <li><span class="mif-pencil"></span> pencil</li>
                <li><span class="mif-eyedropper"></span> eyedropper</li>
                <li><span class="mif-paint"></span> paint</li>
                <li><span class="mif-image"></span> image</li>
                <li><span class="mif-images"></span> images</li>
                <li><span class="mif-camera"></span> camera</li>
                <li><span class="mif-headphones"></span> headphones</li>
                <li><span class="mif-music"></span> music</li>
                <li><span class="mif-film"></span> film</li>
                <li><span class="mif-video-camera"></span> video-camera</li>
                <li><span class="mif-dice"></span> dice</li>
                <li><span class="mif-books"></span> books</li>
                <li><span class="mif-file-empty"></span> file-empty</li>
                <li><span class="mif-files-empty"></span> files-empty</li>
                <li><span class="mif-file-text"></span> file-text</li>
                <li><span class="mif-file-picture"></span> file-picture</li>
                <li><span class="mif-file-music"></span> file-music</li>
                <li><span class="mif-file-play"></span> file-play</li>
                <li><span class="mif-file-video"></span> file-video</li>
                <li><span class="mif-file-zip"></span> file-zip</li>
                <li><span class="mif-stack"></span> stack</li>
                <li><span class="mif-folder"></span> folder</li>
                <li><span class="mif-folder-open"></span> folder-open</li>
                <li><span class="mif-folder-plus"></span> folder-plus</li>
                <li><span class="mif-folder-minus"></span> folder-minus</li>
                <li><span class="mif-folder-download"></span> folder-download</li>
                <li><span class="mif-folder-upload"></span> folder-upload</li>
                <li><span class="mif-tag"></span> tag</li>
                <li><span class="mif-tags"></span> tags</li>
                <li><span class="mif-barcode"></span> barcode</li>
                <li><span class="mif-qrcode"></span> qrcode</li>
                <li><span class="mif-cart"></span> cart</li>
                <li><span class="mif-credit-card"></span> credit-card</li>
                <li><span class="mif-calculator"></span> calculator</li>
                <li><span class="mif-help"></span> help</li>
                <li><span class="mif-envelop"></span> envelop</li>
                <li><span class="mif-location"></span> location</li>
                <li><span class="mif-compass"></span> compass</li>
                <li><span class="mif-compass2"></span> compass2</li>
                <li><span class="mif-map"></span> map</li>
                <li><span class="mif-history"></span> history</li>
                <li><span class="mif-bell"></span> bell</li>
                <li><span class="mif-calendar"></span> calendar</li>
                <li><span class="mif-printer"></span> printer</li>
                <li><span class="mif-keyboard"></span> keyboard</li>
                <li><span class="mif-download"></span> download</li>
                <li><span class="mif-upload"></span> upload</li>
                <li><span class="mif-floppy-disk"></span> floppy-disk</li>
                <li><span class="mif-drive"></span> drive</li>
                <li><span class="mif-database"></span> database</li>
                <li><span class="mif-undo"></span> undo</li>
                <li><span class="mif-redo"></span> redo</li>
                <li><span class="mif-bubble"></span> bubble</li>
                <li><span class="mif-bubbles"></span> bubbles</li>
                <li><span class="mif-user"></span> user</li>
                <li><span class="mif-users"></span> users</li>
                <li><span class="mif-user-plus"></span> user-plus</li>
                <li><span class="mif-user-minus"></span> user-minus</li>
                <li><span class="mif-user-check"></span> user-check</li>
                <li><span class="mif-hour-glass"></span> hour-glass</li>
                <li><span class="mif-search"></span> search</li>
                <li><span class="mif-zoom-in"></span> zoom-in</li>
                <li><span class="mif-zoom-out"></span> zoom-out</li>
                <li><span class="mif-enlarge"></span> enlarge</li>
                <li><span class="mif-shrink"></span> shrink</li>
                <li><span class="mif-enlarge2"></span> enlarge2</li>
                <li><span class="mif-shrink2"></span> shrink2</li>
                <li><span class="mif-key"></span> key</li>
                <li><span class="mif-wrench"></span> wrench</li>
                <li><span class="mif-equalizer"></span> equalizer</li>
                <li><span class="mif-equalizer-v"></span> equalizer-v</li>
                <li><span class="mif-cog"></span> cog</li>
                <li><span class="mif-cogs"></span> cogs</li>
                <li><span class="mif-magic-wand"></span> magic-wand</li>
                <li><span class="mif-bug"></span> bug</li>
                <li><span class="mif-trophy"></span> trophy</li>
                <li><span class="mif-gift"></span> gift</li>
                <li><span class="mif-spoon-fork"></span> spoon-fork</li>
                <li><span class="mif-rocket"></span> rocket</li>
                <li><span class="mif-meter"></span> meter</li>
                <li><span class="mif-hammer"></span> hammer</li>
                <li><span class="mif-fire"></span> fire</li>
                <li><span class="mif-lab"></span> lab</li>
                <li><span class="mif-bin"></span> bin</li>
                <li><span class="mif-truck"></span> truck</li>
                <li><span class="mif-target"></span> target</li>
                <li><span class="mif-power"></span> power</li>
                <li><span class="mif-switch"></span> switch</li>
                <li><span class="mif-power-cord"></span> power-cord</li>
                <li><span class="mif-clipboard"></span> clipboard</li>
                <li><span class="mif-list-numbered"></span> list-numbered</li>
                <li><span class="mif-list"></span> list</li>
                <li><span class="mif-list2"></span> list2</li>
                <li><span class="mif-tree"></span> tree</li>
                <li><span class="mif-cloud"></span> cloud</li>
                <li><span class="mif-cloud-download"></span> cloud-download</li>
                <li><span class="mif-cloud-upload"></span> cloud-upload</li>
                <li><span class="mif-download2"></span> download2</li>
                <li><span class="mif-upload2"></span> upload2</li>
                <li><span class="mif-earth"></span> earth</li>
                <li><span class="mif-link"></span> link</li>
                <li><span class="mif-flag"></span> flag</li>
                <li><span class="mif-attachment"></span> attachment</li>
                <li><span class="mif-eye"></span> eye</li>
                <li><span class="mif-bookmark"></span> bookmark</li>
                <li><span class="mif-bookmarks"></span> bookmarks</li>
                <li><span class="mif-contrast"></span> contrast</li>
                <li><span class="mif-brightness"></span> brightness</li>
                <li><span class="mif-star-empty"></span> star-empty</li>
                <li><span class="mif-star-half"></span> star-half</li>
                <li><span class="mif-star-half"></span> star-half</li>
                <li><span class="mif-star-full"></span> star-full</li>
                <li><span class="mif-heart"></span> heart</li>
                <li><span class="mif-heart-broken"></span> heart-broken</li>
                <li><span class="mif-warning"></span> warning</li>
                <li><span class="mif-notification"></span> notification</li>
                <li><span class="mif-question"></span> question</li>
                <li><span class="mif-plus"></span> plus</li>
                <li><span class="mif-minus"></span> minus</li>
                <li><span class="mif-info"></span> info</li>
                <li><span class="mif-cancel"></span> cancel</li>
                <li><span class="mif-blocked"></span> blocked</li>
                <li><span class="mif-cross"></span> cross</li>
                <li><span class="mif-checkmark"></span> checkmark</li>
                <li><span class="mif-spell-check"></span> spell-check</li>
                <li><span class="mif-enter"></span> enter</li>
                <li><span class="mif-exit"></span> exit</li>
                <li><span class="mif-arrow-up-left"></span> arrow-up-left</li>
                <li><span class="mif-arrow-up"></span> arrow-up</li>
                <li><span class="mif-arrow-up-right"></span> arrow-up-right</li>
                <li><span class="mif-arrow-right"></span> arrow-right</li>
                <li><span class="mif-arrow-down-right"></span> arrow-down-right</li>
                <li><span class="mif-arrow-down"></span> arrow-down</li>
                <li><span class="mif-arrow-down-left"></span> arrow-down-left</li>
                <li><span class="mif-arrow-left"></span> arrow-left</li>
                <li><span class="mif-tab"></span> tab</li>
                <li><span class="mif-move-up"></span> move-up</li>
                <li><span class="mif-move-down"></span> move-down</li>
                <li><span class="mif-sort-asc"></span> sort-asc</li>
                <li><span class="mif-sort-desc"></span> sort-desc</li>
                <li><span class="mif-command"></span> command</li>
                <li><span class="mif-shift"></span> shift</li>
                <li><span class="mif-crop"></span> crop</li>
                <li><span class="mif-filter"></span> filter</li>
                <li><span class="mif-bold"></span> bold</li>
                <li><span class="mif-underline"></span> underline</li>
                <li><span class="mif-italic"></span> italic</li>
                <li><span class="mif-strikethrough"></span> strikethrough</li>
                <li><span class="mif-page-break"></span> page-break</li>
                <li><span class="mif-superscript"></span> superscript</li>
                <li><span class="mif-subscript"></span> subscript</li>
                <li><span class="mif-table"></span> table</li>
                <li><span class="mif-insert-template"></span> insert-template</li>
                <li><span class="mif-pilcrow"></span> pilcrow</li>
                <li><span class="mif-ltr"></span> ltr</li>
                <li><span class="mif-rtl"></span> rtl</li>
                <li><span class="mif-section"></span> section</li>
                <li><span class="mif-paragraph-left"></span> paragraph-left</li>
                <li><span class="mif-paragraph-center"></span> paragraph-center</li>
                <li><span class="mif-paragraph-right"></span> paragraph-right</li>
                <li><span class="mif-paragraph-justify"></span> paragraph-justify</li>
                <li><span class="mif-indent-increase"></span> indent-increase</li>
                <li><span class="mif-indent-decrease"></span> indent-decrease</li>
                <li><span class="mif-embed"></span> embed</li>
                <li><span class="mif-embed2"></span> embed2</li>
                <li><span class="mif-share"></span> share</li>
                <li><span class="mif-feed3"></span> feed3</li>
                <li><span class="mif-chevron-thin-down"></span> chevron-thin-down</li>
                <li><span class="mif-chevron-thin-left"></span> chevron-thin-left</li>
                <li><span class="mif-chevron-thin-right"></span> chevron-thin-right</li>
                <li><span class="mif-chevron-thin-up"></span> chevron-thin-up</li>
                <li><span class="mif-flow-branch"></span> flow-branch</li>
                <li><span class="mif-flow-cascade"></span> flow-cascade</li>
                <li><span class="mif-flow-line"></span> flow-line</li>
                <li><span class="mif-flow-parallel"></span> flow-parallel</li>
                <li><span class="mif-flow-tree"></span> flow-tree</li>
                <li><span class="mif-air"></span> air</li>
                <li><span class="mif-medal"></span> medal</li>
                <li><span class="mif-paper-plane"></span> paper-plane</li>
                <li><span class="mif-shareable"></span> shareable</li>
                <li><span class="mif-shop"></span> shop</li>
                <li><span class="mif-shopping-basket2"></span> shopping-basket2</li>
                <li><span class="mif-thumbs-down"></span> thumbs-down</li>
                <li><span class="mif-thumbs-up"></span> thumbs-up</li>
                <li><span class="mif-traffic-cone"></span> traffic-cone</li>
                <li><span class="mif-water"></span> water</li>
                <li><span class="mif-cabinet"></span> cabinet</li>
                <li><span class="mif-suitcase"></span> suitcase</li>
                <li><span class="mif-gamepad"></span> gamepad</li>
                <li><span class="mif-lock"></span> lock</li>
                <li><span class="mif-unlock"></span> unlock</li>
                <li><span class="mif-tools"></span> tools</li>
                <li><span class="mif-pin"></span> pin</li>
                <li><span class="mif-discout"></span> discout</li>
                <li><span class="mif-profile"></span> profile</li>
                <li><span class="mif-dollar"></span> dollar</li>
                <li><span class="mif-dollars"></span> dollars</li>
                <li><span class="mif-coins"></span> coins</li>
                <li><span class="mif-male"></span> male</li>
                <li><span class="mif-female"></span> female</li>
                <li><span class="mif-piano"></span> piano</li>
                <li><span class="mif-anchor"></span> anchor</li>
            </ul>
        </div>

        <h4 id="_mobile_">Mobile icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-wifi-low"></span> wifi-low</li>
                <li><span class="mif-wifi-mid"></span> wifi-mid</li>
                <li><span class="mif-wifi-full"></span> wifi-full</li>
                <li><span class="mif-perm-phone-msg"></span> perm-phone-msg</li>
                <li><span class="mif-bt-settings"></span> bt-settings</li>
                <li><span class="mif-settings-phone"></span> settings-phone</li>
                <li><span class="mif-dialer-sip"></span> dialer-sip</li>
                <li><span class="mif-dialpad"></span> dialpad</li>
                <li><span class="mif-ring-volume"></span> ring-volume</li>
                <li><span class="mif-voicemail"></span> voicemail</li>
                <li><span class="mif-bluetooth"></span> bluetooth</li>
                <li><span class="mif-bt-connected"></span> bt-connected</li>
                <li><span class="mif-bt-disabled"></span> bt-disabled</li>
                <li><span class="mif-bt-searching"></span> bt-searching</li>
                <li><span class="mif-phonelink"></span> phonelink</li>
                <li><span class="mif-phonelink-off"></span> phonelink-off</li>
                <li><span class="mif-my-location"></span> my-location</li>
                <li><span class="mif-bt-audio"></span> bt-audio</li>
                <li><span class="mif-phone-bt"></span> phone-bt</li>
                <li><span class="mif-phone-forwarded"></span> phone-forwarded</li>
                <li><span class="mif-phone-in-talk"></span> phone-in-talk</li>
                <li><span class="mif-phone-locked"></span> phone-locked</li>
                <li><span class="mif-phone-missed"></span> phone-missed</li>
                <li><span class="mif-phone-paused"></span> phone-paused</li>
                <li><span class="mif-headphones"></span> headphones</li>
                <li><span class="mif-wifi-connect"></span> wifi-connect</li>
                <li><span class="mif-feed"></span> feed</li>
                <li><span class="mif-mic"></span> mic</li>
                <li><span class="mif-phone"></span> phone</li>
                <li><span class="mif-satellite"></span> satellite</li>
                <li><span class="mif-battery-full"></span> battery-full</li>
                <li><span class="mif-battery-two"></span> battery-two</li>
                <li><span class="mif-battery-one"></span> battery-one</li>
                <li><span class="mif-battery-empty"></span> battery-empty</li>
                <li><span class="mif-battery-charge"></span> battery-charge</li>
            </ul>
        </div>

        <h4 id="_device_">Device icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-display"></span> display</li>
                <li><span class="mif-laptop"></span> laptop</li>
                <li><span class="mif-mobile"></span> mobile</li>
                <li><span class="mif-tablet"></span> tablet</li>
                <li><span class="mif-tablet-landscape"></span> tablet-landscape</li>
            </ul>
        </div>

        <h4 id="_player_">Player icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-play"></span> play</li>
                <li><span class="mif-pause"></span> pause</li>
                <li><span class="mif-stop"></span> stop</li>
                <li><span class="mif-backward"></span> backward</li>
                <li><span class="mif-forward"></span> forward</li>
                <li><span class="mif-first"></span> first</li>
                <li><span class="mif-last"></span> last</li>
                <li><span class="mif-previous"></span> previous</li>
                <li><span class="mif-next"></span> next</li>
                <li><span class="mif-eject"></span> eject</li>
                <li><span class="mif-volume-high"></span> volume-high</li>
                <li><span class="mif-volume-medium"></span> volume-medium</li>
                <li><span class="mif-volume-low"></span> volume-low</li>
                <li><span class="mif-volume-mute"></span> volume-mute</li>
                <li><span class="mif-volume-mute2"></span> volume-mute2</li>
                <li><span class="mif-volume-plus"></span> volume-plus</li>
                <li><span class="mif-volume-minus"></span> volume-minus</li>
                <li><span class="mif-loop"></span> loop</li>
                <li><span class="mif-loop2"></span> loop2</li>
                <li><span class="mif-infinite"></span> infinite</li>
                <li><span class="mif-shuffle"></span> shuffle</li>
            </ul>
        </div>

        <h4 id="_brand_">Brand icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-youtube-play"></span> youtube-play</li>
                <li><span class="mif-linux"></span> linux</li>
                <li><span class="mif-jsfiddle"></span> jsfiddle</li>
                <li><span class="mif-openid"></span> openid</li>
                <li><span class="mif-digg"></span> digg</li>
                <li><span class="mif-google-wallet"></span> google-wallet</li>
                <li><span class="mif-opencart"></span> opencart</li>
                <li><span class="mif-amazon"></span> amazon</li>
                <li><span class="mif-wikipedia"></span> wikipedia</li>
                <li><span class="mif-google"></span> google</li>
                <li><span class="mif-google-plus"></span> google-plus</li>
                <li><span class="mif-facebook"></span> facebook</li>
                <li><span class="mif-twitter"></span> twitter</li>
                <li><span class="mif-youtube"></span> youtube</li>
                <li><span class="mif-steam"></span> steam</li>
                <li><span class="mif-onedrive"></span> onedrive</li>
                <li><span class="mif-github"></span> github</li>
                <li><span class="mif-git"></span> git</li>
                <li><span class="mif-apple"></span> apple</li>
                <li><span class="mif-android"></span> android</li>
                <li><span class="mif-windows"></span> windows</li>
                <li><span class="mif-skype"></span> skype</li>
                <li><span class="mif-linkedin"></span> linkedin</li>
                <li><span class="mif-html5"></span> html5</li>
                <li><span class="mif-css3"></span> css3</li>
                <li><span class="mif-chrome"></span> chrome</li>
                <li><span class="mif-firefox"></span> firefox</li>
                <li><span class="mif-ie"></span> ie</li>
                <li><span class="mif-opera"></span> opera</li>
                <li><span class="mif-safari"></span> safari</li>
                <li><span class="mif-creative-cloud"></span> creative-cloud</li>
                <li><span class="mif-dropbox"></span> dropbox</li>
                <li><span class="mif-evernote"></span> evernote</li>
                <li><span class="mif-paypal"></span> paypal</li>
                <li><span class="mif-swarm"></span> swarm</li>
                <li><span class="mif-vk"></span> vk</li>
                <li><span class="mif-yelp"></span> yelp</li>
                <li><span class="mif-dribbble"></span> dribbble</li>
                <li><span class="mif-lastfm"></span> lastfm</li>
                <li><span class="mif-pinterest"></span> pinterest</li>
                <li><span class="mif-stumbleupon"></span> stumbleupon</li>
                <li><span class="mif-vimeo"></span> vimeo</li>
            </ul>
            <br />
            <div class="padding5 bg-grayLighter text-secondary">
                <span class="mif-warning mif-4x place-left margin5"></span>
                <ul style="margin-left: 50px">
                    <li>All brand icons are trademarks of their respective owners.</li>
                    <li>The use of these trademarks does not indicate endorsement of the trademark holder by Metro Icon Font, nor vice versa.</li>
                </ul>
            </div>
        </div>

        <h4 id="_weather_">Weather icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-sunrise"></span> sunrise</li>
                <li><span class="mif-sun"></span> sun</li>
                <li><span class="mif-moon"></span> moon</li>
                <li><span class="mif-windy"></span> windy</li>
                <li><span class="mif-wind"></span> wind</li>
                <li><span class="mif-snowflake"></span> showflake</li>
                <li><span class="mif-cloudy"></span> cloudy</li>
                <li><span class="mif-cloudy2"></span> cloudy2</li>
                <li><span class="mif-cloud2"></span> cloud2</li>
                <li><span class="mif-weather"></span> weather</li>
                <li><span class="mif-weather2"></span> weather2</li>
                <li><span class="mif-weather3"></span> weather3</li>
                <li><span class="mif-lines"></span> lines</li>
                <li><span class="mif-cloud3"></span> cloud3</li>
                <li><span class="mif-lightning"></span> lightning</li>
                <li><span class="mif-lightning2"></span> lightning2</li>
                <li><span class="mif-rainy"></span> rainy</li>
                <li><span class="mif-windy2"></span> windy2</li>
                <li><span class="mif-windy3"></span> windy3</li>
                <li><span class="mif-snowy"></span> snowy</li>
                <li><span class="mif-snowy2"></span> snowy2</li>
                <li><span class="mif-snowy3"></span> snowy3</li>
                <li><span class="mif-weather4"></span> weather4</li>
                <li><span class="mif-cloudy2"></span> cloudy2</li>
                <li><span class="mif-cloud4"></span> cloud4</li>
                <li><span class="mif-lightning3"></span> lightning3</li>
                <li><span class="mif-sun4"></span> sun4</li>
                <li><span class="mif-moon2"></span> moon2</li>
                <li><span class="mif-cloudy3"></span> cloudy3</li>
                <li><span class="mif-cloud5"></span> cloud5</li>
                <li><span class="mif-lightning4"></span> lightning4</li>
                <li><span class="mif-rainy3"></span> rainy3</li>
                <li><span class="mif-windy4"></span> windy4</li>
                <li><span class="mif-windy5"></span> windy5</li>
                <li><span class="mif-snowy4"></span> snowy4</li>
                <li><span class="mif-snowy5"></span> snowy5</li>
                <li><span class="mif-weather5"></span> weather5</li>
                <li><span class="mif-cloudy4"></span> cloudy4</li>
                <li><span class="mif-lightning5"></span> lightning5</li>
                <li><span class="mif-thermometer"></span> thermometer</li>
                <li><span class="mif-none"></span> none</li>
                <li><span class="mif-celsius"></span> celsius</li>
                <li><span class="mif-fahrenheit"></span> fahrenheit</li>
            </ul>
        </div>

        <h4 id="_chart_">Chart icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-chart-bars"></span> chart-bars</li>
                <li><span class="mif-chart-bars2"></span> chart-bars2</li>
                <li><span class="mif-chart-dots"></span> chart-dots</li>
                <li><span class="mif-chart-pie"></span> chart-pie</li>
                <li><span class="mif-chart-line"></span> chart-line</li>
            </ul>
        </div>

        <h4 id="_spinner_">Spinner icons</h4>
        <div class="example">
            <ul class="inline-list icon-list">
                <li><span class="mif-spinner"></span> spinner</li>
                <li><span class="mif-spinner2"></span> spinner2</li>
                <li><span class="mif-spinner3"></span> spinner3</li>
                <li><span class="mif-spinner4"></span> spinner4</li>
                <li><span class="mif-spinner5"></span> spinner5</li>
                <li><span class="mif-loop2"></span> loop2</li>
            </ul>
            <h5>Animated Spinner icons (with subclass mif-ani-spin)</h5>
            <ul class="inline-list icon-list">
                <li><span class="mif-spinner mif-ani-spin"></span> spinner</li>
                <li><span class="mif-spinner2 mif-ani-spin"></span> spinner2</li>
                <li><span class="mif-spinner3 mif-ani-spin"></span> spinner3</li>
                <li><span class="mif-spinner4 mif-ani-spin"></span> spinner4</li>
                <li><span class="mif-spinner5 mif-ani-spin"></span> spinner5</li>
                <li><span class="mif-loop2 mif-ani-spin"></span> loop2</li>
            </ul>
            <h5>Animated Spinner icons (with subclass mif-ani-pulse)</h5>
            <ul class="inline-list icon-list">
                <li><span class="mif-spinner mif-ani-pulse"></span> spinner</li>
                <li><span class="mif-spinner2 mif-ani-pulse"></span> spinner2</li>
                <li><span class="mif-spinner3 mif-ani-pulse"></span> spinner3</li>
                <li><span class="mif-spinner4 mif-ani-pulse"></span> spinner4</li>
                <li><span class="mif-spinner5 mif-ani-pulse"></span> spinner5</li>
                <li><span class="mif-loop2 mif-ani-pulse"></span> loop2</li>
            </ul>
        </div>

        <h4 id="_animated_">Animated icons</h4>
        <div class="padding10 bg-lighterBlue fg-white margin10 no-margin-right no-margin-left align-center">
            Special thanks to <a href="https://github.com/MenesesEvandro" class="text-accent text-bold fg-white">Meneses Evandro</a> for adding this animations.
        </div>
        <div class="example">
            <h5>Normal speed</h5>
            <ul class="inline-list icon-list">
                <li><span class="mif-wrench mif-ani-spanner"></span> spanner</li>
                <li><span class="mif-bell mif-ani-ring"></span> bell</li>
                <li><span class="mif-envelop mif-ani-vertical"></span> vertical</li>
                <li><span class="mif-blocked mif-ani-horizontal"></span> horizontal</li>
                <li><span class="mif-warning mif-ani-flash"></span> flash</li>
                <li><span class="mif-thumbs-up mif-ani-bounce"></span> bounce</li>
                <li><span class="mif-paper-plane mif-ani-float"></span> float</li>
                <li><span class="mif-heart mif-ani-heartbeat"></span> heartbeat</li>
                <li><span class="mif-envelop mif-ani-shake"></span> shake</li>
                <li><span class="mif-gift mif-ani-shuttle"></span> shuttle</li>
                <li><span class="mif-truck mif-ani-pass"></span> pass</li>
                <li><span class="mif-earth mif-ani-ripple"></span> ripple</li>
            </ul>
            <h5>Fast speed (with subclass mif-ani-fast)</h5>
            <ul class="inline-list icon-list">
                <li><span class="mif-wrench mif-ani-spanner mif-ani-fast"></span> spanner</li>
                <li><span class="mif-bell mif-ani-ring mif-ani-fast"></span> bell</li>
                <li><span class="mif-envelop mif-ani-vertical mif-ani-fast"></span> vertical</li>
                <li><span class="mif-blocked mif-ani-horizontal mif-ani-fast"></span> horizontal</li>
                <li><span class="mif-warning mif-ani-flash mif-ani-fast"></span> flash</li>
                <li><span class="mif-thumbs-up mif-ani-bounce mif-ani-fast"></span> bounce</li>
                <li><span class="mif-paper-plane mif-ani-float mif-ani-fast"></span> float</li>
                <li><span class="mif-heart mif-ani-heartbeat mif-ani-fast"></span> heartbeat</li>
                <li><span class="mif-envelop mif-ani-shake mif-ani-fast"></span> shake</li>
                <li><span class="mif-gift mif-ani-shuttle mif-ani-fast"></span> shuttle</li>
                <li><span class="mif-truck mif-ani-pass mif-ani-fast"></span> pass</li>
                <li><span class="mif-earth mif-ani-ripple mif-ani-fast"></span> ripple</li>
            </ul>
            <h5>Slow speed (with subclass mif-ani-slow)</h5>
            <ul class="inline-list icon-list">
                <li><span class="mif-wrench mif-ani-spanner mif-ani-slow"></span> spanner</li>
                <li><span class="mif-bell mif-ani-ring mif-ani-slow"></span> bell</li>
                <li><span class="mif-envelop mif-ani-vertical mif-ani-slow"></span> vertical</li>
                <li><span class="mif-blocked mif-ani-horizontal mif-ani-slow"></span> horizontal</li>
                <li><span class="mif-warning mif-ani-flash mif-ani-slow"></span> flash</li>
                <li><span class="mif-thumbs-up mif-ani-bounce mif-ani-slow"></span> bounce</li>
                <li><span class="mif-paper-plane mif-ani-float mif-ani-slow"></span> float</li>
                <li><span class="mif-heart mif-ani-heartbeat mif-ani-slow"></span> heartbeat</li>
                <li><span class="mif-envelop mif-ani-shake mif-ani-slow"></span> shake</li>
                <li><span class="mif-gift mif-ani-shuttle mif-ani-slow"></span> shuttle</li>
                <li><span class="mif-truck mif-ani-pass mif-ani-slow"></span> pass</li>
                <li><span class="mif-earth mif-ani-ripple mif-ani-slow"></span> ripple</li>
            </ul>
            <p>
                To use animation only on-hover use classes with <span class="tag">mif-ani-hover-*</span>.
            </p>
        </div>

    </div>

    @@hit

</body>
</html>